import 'package:enjoy_plan/locale/app_localizations.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

/// @author: lijinxi.1220@bytedance.com
/// @description:
/// @date: 2024/11/19 11:27
///

class CustomPageTwoWidget extends StatelessWidget {
  const CustomPageTwoWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.all(32),
        child: Column(mainAxisSize: MainAxisSize.max, children: [
          TopBarWidget(),
          Padding(padding: EdgeInsets.only(top: 64), child: StepWidget())
        ]));
  }
}

class TopBarWidget extends StatelessWidget {
  const TopBarWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisSize: MainAxisSize.max,
      children: [
        Icon(
          FontAwesomeIcons.starHalfStroke,
          color: Colors.blueAccent,
          size: 32,
        ),
        SizedBox(
          width: 16,
        ),
        Text(
          AppLocalizations.of(context).createAIPlan,
          style: TextStyle(
              decoration: TextDecoration.none,
              color: Colors.black,
              fontWeight: FontWeight.w700,
              fontSize: 32),
        ),
        Spacer(),
        Icon(
          FontAwesomeIcons.xmark,
          color: Colors.grey,
        ),
        SizedBox(
          width: 16,
        ),
      ],
    );
  }
}

class StepWidget extends StatefulWidget {
  const StepWidget({super.key});

  @override
  State<StepWidget> createState() => _StepWidgetState();
}

class _StepWidgetState extends State<StepWidget> {
  @override
  Widget build(BuildContext context) {
    return Flex(
      direction: Axis.horizontal,
      children: [
        Expanded(
          flex: 1,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Row(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.blueAccent,
                    radius: 16,
                    child: Icon(
                      FontAwesomeIcons.check,
                      size: 18,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(
                    width: 16,
                  ),
                  Text(
                    AppLocalizations.of(context).goal,
                    style: TextStyle(
                        color: Colors.black,
                        decoration: TextDecoration.none,
                        fontSize: 28),
                  )
                ],
              ),
              SizedBox(
                height: 24,
              ),
              Row(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.blueAccent,
                    radius: 16,
                    child: Icon(
                      FontAwesomeIcons.two,
                      size: 18,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(
                    width: 16,
                  ),
                  Text(
                    AppLocalizations.of(context).background,
                    style: TextStyle(
                        color: Colors.black12,
                        decoration: TextDecoration.none,
                        fontSize: 28),
                  )
                ],
              ),
              SizedBox(
                height: 24,
              ),
              Row(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.grey,
                    radius: 16,
                    child: Icon(
                      FontAwesomeIcons.three,
                      size: 18,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(
                    width: 16,
                  ),
                  Text(
                    AppLocalizations.of(context).preference,
                    style: TextStyle(
                        color: Colors.black12,
                        decoration: TextDecoration.none,
                        fontSize: 28),
                  )
                ],
              ),
              SizedBox(
                height: 24,
              ),
              Row(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.grey,
                    radius: 16,
                    child: Icon(
                      FontAwesomeIcons.four,
                      size: 18,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(
                    width: 16,
                  ),
                  Text(
                    AppLocalizations.of(context).time,
                    style: TextStyle(
                        color: Colors.black12,
                        decoration: TextDecoration.none,
                        fontSize: 28),
                  )
                ],
              ),
              SizedBox(
                height: 24,
              ),
              Row(
                children: [
                  CircleAvatar(
                    backgroundColor: Colors.grey,
                    radius: 16,
                    child: Icon(
                      FontAwesomeIcons.five,
                      size: 18,
                      color: Colors.white,
                    ),
                  ),
                  SizedBox(
                    width: 16,
                  ),
                  Text(
                    AppLocalizations.of(context).setting,
                    style: TextStyle(
                        color: Colors.black12,
                        decoration: TextDecoration.none,
                        fontSize: 28),
                  )
                ],
              ),
            ],
          ),
        ),
        Expanded(
          flex: 3,
          child: Column(
            mainAxisSize: MainAxisSize.max,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(children: [
                Text(
                  AppLocalizations.of(context).learnBackground,
                  style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.w500,
                      decoration: TextDecoration.none,
                      color: Colors.black),
                ),
                SizedBox(
                  width: 16,
                ),
                Icon(
                  FontAwesomeIcons.circleExclamation,
                  color: Colors.grey,
                  size: 24,
                )
              ]),
              SizedBox(
                height: 16,
              ),
              Text(AppLocalizations.of(context).learnBackgroundIntro,
                  style: TextStyle(
                      color: Colors.black12,
                      decoration: TextDecoration.none,
                      fontSize: 24)),
              SizedBox(
                height: 16,
              ),
              SizedBox(
                height: 300,
                child: Material(
                  color: Colors.grey,
                  elevation: 10,
                  borderRadius: BorderRadius.all(Radius.circular(10)),
                  child: TextField(
                    decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText:
                            AppLocalizations.of(context).learnBackgroundExample,
                        fillColor: Colors.grey),
                    maxLines: 100,
                    maxLength: 500,
                  ),
                ),
              ),
              SizedBox(
                height: 16,
              ),
              Row(children: [
                Icon(
                  FontAwesomeIcons.lightbulb,
                  size: 16,
                  color: Colors.blueAccent,
                ),
                TextButton(
                    onPressed: () {},
                    child: Text(
                      AppLocalizations.of(context).learnBackgroundWithAi,
                      style: TextStyle(color: Colors.blueAccent, fontSize: 18),
                    ))
              ]),
              SizedBox(
                height: 64,
              ),
              Row(
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(
                      style: TextButton.styleFrom(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8.0),
                          ),
                          backgroundColor: Colors.grey),
                      onPressed: () {},
                      child: Text(
                        AppLocalizations.of(context).previous,
                        style: TextStyle(fontSize: 24, color: Colors.black),
                      )),
                  SizedBox(
                    width: 64,
                  ),
                  TextButton(
                      style: TextButton.styleFrom(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8.0),
                          ),
                          backgroundColor: Colors.blueAccent),
                      onPressed: () {},
                      child: Text(
                        AppLocalizations.of(context).next,
                        style: TextStyle(fontSize: 24, color: Colors.white),
                      ))
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}
